<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>MeteoCal</title>
        <style type="text/css">
            .not_read {
                background: rgb(254,252,234); /* Old browsers */
                background: -moz-linear-gradient(top, rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,252,234,1)), color-stop(100%,rgba(241,218,54,1))); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* IE10+ */
                background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */
            }
            
            .bold_text {
                font-weight: bold;
            }
            
            .creator .fc-event,
            .creator a,
            .creator .fc-event-inner{
                background: blue;
            }
            .not_creator .fc-event,
            .not_creator a,
            .not_creator .fc-event-inner{
                background: deepskyblue;
            }
        </style>
    </h:head>

    <h:body>
        <div id="top" class="top">
            <h:form id="barform"> 
                <p:toolbar>     
                    <f:facet name="left">
                        <p:button value="#{userBean.nameSurname}" icon="ui-icon-home" outcome="userpage"/>
                        
                        <p:commandButton id="notificationButton" onclick="PF('overlayVar').loadContents();"  icon="ui-icon-circle-triangle-s" value="Notifications #{notificationBean.notificationsNotRead}" actionListener="#{notificationBean.notificationButtonClicked}" style="width: 200px"/>

                        <p:overlayPanel widgetVar="overlayVar" for="notificationButton" dismissable="true" showEffect="fade" style="width: 400px">                   
                            <p:dataScroller id="notifications" value="#{notificationBean.notifications}" mode="inline" var="notification" chunkSize="10" scrollHeight="300" > 
                                <p:panel header="#{notification.notificationType.description}" styleClass="#{notificationBean.notificationStyle}">
                                    <p:link outcome="/user/eventpage" value="#{notification.event.name}" style="color: black">
                                        <f:param name="id" value="#{notification.event.id}" />
                                    </p:link>
                                    <br/>
                                    <h:outputText value="#{notification.creationTimestamp}" style="font-size: 70%"/>
                                </p:panel>                               
                            </p:dataScroller>                           
                        </p:overlayPanel>               
                    </f:facet>
                    
                    <f:facet name="right">
                        <p:commandButton id="exitButton" type="push" value="Logout" title="Logout" icon="ui-icon-power" action="#{topBarBean.logout}" update="@all" />
                    </f:facet>
                </p:toolbar>
                <p:poll interval="3" listener="#{notificationBean.updateNotifications}"/>
            </h:form>
        </div>   
        
        <div id="content" class="center_content">
            <ui:insert name="content">Content</ui:insert>
        </div>

    </h:body>

</html>
